import React, { useState, useEffect } from "react";
import Crumbs from "../../components/crumbs/index";
import "./scss/goodsList.scss";
import { Shop_list, SearchShop } from "../../api/home";

import {
  Input,
  DatePicker,
  Button,
  Tree,
  Select,
  Table,
  InputNumber,
  Form,
  Typography,
  message,
} from "antd";
const { Option } = Select;
import { SearchOutlined, CarryOutOutlined } from "@ant-design/icons";
import Icon from "@ant-design/icons";
import { file, pi, add_icon } from "../../public/cx/login/svg.jsx";
const { Search } = Input;

// 树状
const treeData = [
  {
    title: "商品分类列表",
    key: "0-0",
    icon: <Icon component={file} />,
    children: [
      {
        title: "心脑血管",
        key: "0-0-0",
        icon: <Icon component={file} />,
        children: [
          {
            title: "leaf",
            key: "0-0-0-0",
            icon: <CarryOutOutlined />,
          },
          {
            title: (
              <>
                <div>multiple line title</div>
                <div>multiple line title</div>
              </>
            ),
            key: "0-0-0-1",
            icon: <CarryOutOutlined />,
          },
          {
            title: "leaf",
            key: "0-0-0-2",
            icon: <CarryOutOutlined />,
          },
        ],
      },
      {
        title: "日常用药",
        key: "0-0-1",
        icon: <Icon component={file} />,
        children: [
          {
            title: "leaf",
            key: "0-0-1-0",
            icon: <CarryOutOutlined />,
          },
        ],
      },
      {
        title: "神经系统",
        key: "0-0-2",
        icon: <Icon component={file} />,
        children: [
          {
            title: "帕金森",
            key: "0-0-2-0",
          },
          {
            title: "失眠",
            key: "0-0-2-1",
          },
        ],
      },
    ],
  },
];
// 组件
const GoodsList = (props) => {
  // 面包屑
  const [CrumbsList] = useState([
    {
      name: "商品列表",
    },
    {
      name: "商品列表",
      url: "/goodsList",
    },
  ]);

  // 日期搜索
  function onChange(date, dateString) {
    console.log(date, dateString);
  }

  //树状文件
  // 表格

  const [originData, setList] = useState([]);

  useEffect(() => {
    Shop_list().then((res) => {
      if (res.code === 2000) {
        setList(res.data);
      }
    });
  }, []);
  // 药品搜索
  const onSearch = (value) => {
    if (value == "") {
      message.warning("输入框不能为空");
    }
    SearchShop({ value }).then((res) => {
      if (res.code == 2000) {
        setList(res.data);
      } else {
        message.warning("没有该药品");
      }
    });
  };

  const onSelect = (selectedKeys, info) => {
    if (info.node.title == "失眠") {
      Shop_list().then((res) => {
        if (res.code === 2000) {
          setList(res.data);
        }
      });
      // 请求数据
    } else if (info.node.title == "帕金森") {
      setList([
        {
          key: "986676",
          produc: "http://localhost:8888/home/1.png",
          name: "帕金森",
          specification: "0.27*24S",
          sell: "5467",
          residue: "4525",
          price: "¥30.29",
          medicine: "否",
          effect: "滋阴清热，养心安神。通过",
          state: "出售中",
          type: ["失眠", "帕金森"],
        },
      ]);
    }
  };
  // 每页多少
  function handleChange(value) {
    console.log(value); // { value: "lucy", key: "lucy", label: "Lucy (101)" }
  }
  // 跳转到添加页面
  function addShop() {
    props.history.push("/goodAdd");
  }
  const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
    const inputNode = inputType === "number" ? <InputNumber /> : <Input />;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            name={dataIndex}
            style={{
              margin: 0,
            }}
            rules={[
              {
                required: true,
                message: `Please Input ${title}!`,
              },
            ]}
          >
            {inputNode}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
  const [form] = Form.useForm();

  const [editingKey, setEditingKey] = useState("");

  const isEditing = (record) => record.key === editingKey;

  const edit = (record) => {
    console.log(123);
  };

  const cancel = () => {
    setEditingKey("");
  };

  const columns = [
    {
      title: "商品编号",
      dataIndex: "key",
      editable: true,
      align: "center",
    },
    {
      title: "商品图片",
      dataIndex: "produc",
      editable: true,
      align: "center",
      render: (record) => <img src={record} alt="" />,
    },
    {
      title: "产品名称",
      dataIndex: "name",
      editable: true,
      align: "center",
    },
    {
      title: "规格",
      dataIndex: "specification",
      editable: true,
      align: "center",
    },
    {
      title: "月售数量",
      dataIndex: "sell",
      editable: true,
      align: "center",
    },
    {
      title: "剩余数量",
      dataIndex: "residue",
      editable: true,
      align: "center",
    },
    {
      title: "单价",
      dataIndex: "price",
      editable: true,
      align: "center",
    },
    {
      title: "处方药",
      dataIndex: "medicine",
      editable: true,
      align: "center",
    },
    {
      title: "功效",
      dataIndex: "effect",
      editable: true,
      align: "center",
    },
    {
      title: "审核状态",
      dataIndex: "audit",
      editable: true,
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "state",
      editable: true,
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "exit",
      align: "center",
      render: (_, record) => {
        return (
          <Typography.Link onClick={() => edit(record)}>编辑</Typography.Link>
        );
      },
    },
  ];
  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }

    return {
      ...col,
      onCell: (record) => ({
        record,

        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

  return (
    <div className="GoodsList">
      <Crumbs CrumbsList={CrumbsList} />
      <div className="search">
        <span className="product_name">产品名称</span>{" "}
        <Search
          placeholder="输入品牌名称"
          onSearch={onSearch}
          style={{ width: 200, height: 30 }}
        />
        <span className="product_time">添加时间</span>
        <div>
          <DatePicker onChange={onChange} />
          <Button type="primary" icon={<SearchOutlined />} className="cha">
            查询
          </Button>
        </div>
      </div>
      {/* 添加 */}
      <div className="add">
        <div onClick={() => addShop()}>
          <Icon component={add_icon} /> &nbsp; 添加商品
        </div>
        <div>
          <Icon component={pi} /> &nbsp;批量删除
        </div>
      </div>
      {/* 产品类型列表 */}
      <div className="product_type_list">
        <div className="left">
          <div className="title">产品类型列表</div>
          <Tree
            showLine={true}
            showIcon={true}
            defaultExpandedKeys={["0-0-2"]}
            onSelect={onSelect}
            treeData={treeData}
          />
        </div>
        <div className="right">
          {/* header */}

          <div className="header">
            <span>每页显示</span>
            <Select
              labelInValue
              defaultValue={{ value: "10" }}
              style={{ width: 81, fontSize: 12 }}
              onChange={handleChange}
            >
              <Option value="10">10条</Option>
              <Option value="20">20条</Option>
              <Option value="30">30条</Option>
              <Option value="50">50条</Option>
            </Select>
          </div>
          {/* 标题 */}
          <div>
            <Form form={form} component={false}>
              <Table
                components={{
                  body: {
                    cell: EditableCell,
                  },
                }}
                scroll={{ x: 1200 }}
                bordered
                dataSource={originData}
                columns={mergedColumns}
                expandable={true}
                rowClassName="editable-row"
                pagination={{
                  onChange: cancel,
                }}
              />
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};

export default GoodsList;
